<script lang="ts" setup>
  import ImgVue from "./components/imgVue.vue";
  import ColumnVue from "./components/columnVue.vue";

  import { reactive, onMounted } from "vue";
  import { getHealth } from "@/api";

  const data = reactive({
    video: {
      src: "https://img.cctvch.cn/uploads/02348446df13620ff568c3bd435beadf.png",
      title: "传播医学价值，弘扬民族文化 《健康中国专题频道》",
      person: `
          <p>为推进“健康中国2030”建设，提高人民健康水平，让老百姓享受改革红利,
              助力共建共享全民健康的战略主题，在此背景下中央广播电视总台《健康中国》
              专题频道应运而生。
          </p>
          <p>《健康中国》专题频道包括政策解读、医改资讯、医疗卫生、养生保健等内容，提供权
              威、主流、新鲜的健康资讯，以人民满意为宗旨，搭建起医生和患者间有效沟通的桥梁。
          </p>
      `,
    },
    column1: {
      special:{},
      list:[]
    },
    column2: {
      special:{},
      list:[]
    },
    column3: {
      special:{},
      list:[]
    },
  });


  onMounted(() => {
    getHealth().then(res => {
      const {POSITION_ITEM_04, POSITION_ITEM_05,POSITION_ITEM_06}:any = res;
      data.column1.special = POSITION_ITEM_04.special;
      data.column1.list = POSITION_ITEM_04.special_list;
      data.column2.special = POSITION_ITEM_05.special;
      data.column2.list = POSITION_ITEM_05.special_list;
      data.column3.special = POSITION_ITEM_06.special;
      data.column3.list = POSITION_ITEM_06.special_list;

    })
  })
</script>

<template>
  <div class="wrap">
    <div class="banner"></div>
    <div class="fixed-width">
      <ImgVue :videoObj="data.video"></ImgVue>
      <div class="column-item">
        <div class="column-wrap flex">
          <div class="column-img">
            <img src="https://img.cctvch.cn/uploads/732c44e3563d8daf0592c73fa1e57023.png" alt="" />
          </div>
          <div class="column-text">
            <div class="column-title-box flex">
              <p class="color-title font-lg font-bolder">
                《名医有约》
              </p>
              <sub class="column-hot font-sm">热度<span>10000</span></sub>
            </div>
            <div class="column-info flex">
              <p class="info font font-normal">
                <span class="info-title font-m">节目类型：</span>
                西医医学访谈节目
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">播出平台：</span>
                央广网
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">出品公司：</span>
                中视财华国际传媒有限公司
              </p>
            </div>
            <div class="introduce flex">
              <p class="introduce-title font-m font-normal">简介：</p>
              <p class="font font-normal">
                汇集医学名家，《名医有约》为人民群众提供全方位全周期的健康服务理念，
                科普医学知识，让观众更加了解人体奥秘及疾病的产生和治疗。节目以品质为基石，
                致力于为大众打造健康生活，提供医生与百姓沟通的桥梁，是医学专业视频中的“柳叶刀”。
              </p>
            </div>
          </div>
        </div>
        <ColumnVue :special="data.column1.special" :list="data.column1.list"></ColumnVue>
      </div>
      <div class="column-item">
        <div class="column-wrap flex">
          <div class="column-img">
            <img src="https://img.cctvch.cn/uploads/959c6ce6d356236deb85b8111cee8143.png" alt="" />
          </div>
          <div class="column-text">
            <div class="column-title-box flex">
              <p class="color-title font-lg font-bolder">
                《大医精诚》 
              </p>
              <sub class="column-hot font-sm">热度<span>10000</span></sub>
            </div>
            <div class="column-info flex">
              <p class="info font font-normal">
                <span class="info-title font-m">节目类型：</span>
                中医医学访谈节目
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">播出平台：</span>
                央广网
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">出品公司：</span>
                中视财华国际传媒有限公司
              </p>
            </div>
            <div class="introduce flex">
              <p class="introduce-title font-m font-normal">简介：</p>
              <p class="font font-normal">
                《大医精诚》是一档关注中医医学的学术理论、疾病防治、
                医疗成果与前沿发展的高端访谈栏目，邀请中医前沿专家为嘉宾，
                进行深入解读和剖析中医医学的发展和应用。
              </p>
            </div>
          </div>
        </div>
        <ColumnVue :special="data.column2.special" :list="data.column2.list"></ColumnVue>
        <!-- <div class="more-btn">
          <img src="@/assets/images/ppp/bottom.png" alt="" />
        </div> -->
      </div>
      <div class="column-item">
        <div class="column-wrap flex">
          <div class="column-img">
            <img src="https://img.cctvch.cn/uploads/36ace55ed0a20c956399c9eb96b00431.png" alt="" />
          </div>
          <div class="column-text">
            <div class="column-title-box flex">
              <p class="color-title font-lg font-bolder">
                《医学百科》 
              </p>
              <sub class="column-hot font-sm">热度<span>10000</span></sub>
            </div>
            <div class="column-info flex">
              <p class="info font font-normal">
                <span class="info-title font-m">节目类型：</span>
                医学类百科词典
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">播出平台：</span>
                央广网
              </p>
              <p class="info font font-normal">
                <span class="info-title font-m">出品公司：</span>
                中视财华国际传媒有限公司
              </p>
            </div>
            <div class="introduce flex">
              <p class="introduce-title font-m font-normal">简介：</p>
              <p class="font font-normal">
               《医学百科》是一档以“普及医学基础理论，
               传播中西医学知识“为宗旨的科普教学网络融媒体栏目，
               以国内著名医学专家教授为主讲者，既传播中医传统知识，
               也传达西医前沿发现，为百姓普及健康知识与理论。
              </p>
            </div>
          </div>
        </div>
        <ColumnVue :special="data.column3.special" :list="data.column3.list"></ColumnVue>
        <!-- <div class="more-btn">
          <img src="@/assets/images/ppp/bottom.png" alt="" />
        </div> -->
      </div>
    </div>
  </div>
</template>
<style scoped>
.wrap {
  margin-bottom: 75px;
}
.fixed-width {
  margin: 0 auto;
  width: 1440px;
}
.banner {
  min-width: 1440px;
  height: 0;
  padding-bottom: 30.2%;
  background: url('https://img.cctvch.cn/uploads/8cb4157c2de48c5160fdd776936a7c7f.png');
  background-size: 100% 100%;
}
/* 彩色文字 */
.color-title {
  background: linear-gradient(0deg, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 栏目介绍 */
.column-item{
  margin-top:165px;
}
.column-img {
  margin-right: 25px;
  margin-bottom: 30px;
  width: 210px;
  height: 275px;
  border-radius: 12px;
  overflow: hidden;
}
.column-img img {
  display: block;
  width: 100%;
  height: 100%;
}
.column-text {
  width:1200px;
  padding-top: 45px;
  color: #626675;
}
.column-title-box {
  margin-bottom: 18px;
}
.column-info {
  margin-bottom: 33px;
}
.info {
  margin-right: 40px;
}
.info-title,
.introduce-title {
  color: #222;
  white-space: nowrap;
}
/* 热度标签 */
.column-hot {
  padding-top: 16px;
  color: #626675;
}
.column-hot::before {
  content: "";
  margin-right: 4px;
  display: inline-block;
  width: 10px;
  height: 12px;
  background: url("@/assets/images/news/hot.png") no-repeat;
  background-size: 100% 100%;
}
</style>
